<template>
  <div class="chat-container">
    <!-- 聊天头部 -->
    <div class="chat-header">
      <div class="header-content">
        <div class="avatar">
          <i class="fa fa-robot"></i>
        </div>
        <div class="user-info">
          <h3>AI 智能助手</h3>
          <span class="status" :class="{ 'offline': !isOnline }">
            {{ isOnline ? '在线' : '离线' }}
          </span>
        </div>
      </div>
      <div class="header-actions">
        <button @click="clearChat" class="action-btn" title="清空聊天">
          <i class="fa fa-trash"></i>
        </button>
      </div>
    </div>

    <!-- 聊天消息区域 -->
    <div class="chat-messages" ref="chatMessages">
      <!-- 欢迎消息 -->
      <div class="message-item ai-message">
        <div class="message-avatar">
          <i class="fa fa-robot"></i>
        </div>
        <div class="message-content">
          <div class="message-bubble">
            <p>您好！我是您的AI智能助手 👋</p>
            <p>请告诉我您需要什么帮助？</p>
          </div>
          <div class="message-time">{{ getCurrentTime() }}</div>
        </div>
      </div>

      <!-- 动态消息列表 -->
      <div
        v-for="(msg, index) in messages"
        :key="index"
        class="message-item"
        :class="msg.sender === 'user' ? 'user-message' : 'ai-message'"
      >
        <!-- 用户消息 -->
        <template v-if="msg.sender === 'user'">
          <div class="message-content">
            <div class="message-bubble user-bubble">
              {{ msg.content }}
              <div class="message-status" v-if="msg.status">
                <i v-if="msg.status === 'sent'" class="fa fa-check"></i>
                <i v-else-if="msg.status === 'sending'" class="fa fa-clock-o"></i>
                <i v-else-if="msg.status === 'error'" class="fa fa-exclamation"></i>
              </div>
            </div>
            <div class="message-time">{{ msg.time || getCurrentTime() }}</div>
          </div>
          <div class="message-avatar user-avatar">
            <i class="fa fa-user"></i>
          </div>
        </template>

        <!-- AI消息 -->
        <template v-else>
          <div class="message-avatar">
            <i class="fa fa-robot"></i>
          </div>
          <div class="message-content">
            <div class="message-bubble ai-bubble" v-html="msg.content"></div>
            <div class="message-time">{{ msg.time || getCurrentTime() }}</div>
          </div>
        </template>
      </div>

      <!-- 正在输入提示 -->
      <div v-if="isTyping" class="message-item ai-message">
        <div class="message-avatar">
          <i class="fa fa-robot"></i>
        </div>
        <div class="message-content">
          <div class="message-bubble typing-bubble">
            <div class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <span class="typing-text">AI正在思考中...</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 聊天输入区域 -->
    <div class="chat-input">
      <div class="input-container">
        <div class="input-wrapper">
          <textarea
            v-model="userInput"
            @keydown.enter.prevent="handleEnter"
            @input="autoResize"
            ref="messageInput"
            class="message-input"
            placeholder="输入消息... (Enter发送, Shift+Enter换行)"
            rows="1"
          ></textarea>
          <div class="input-actions">
            <button
              @click="sendMessage"
              :disabled="!userInput.trim() || isTyping"
              class="send-btn"
              :class="{ 'disabled': !userInput.trim() || isTyping }"
            >
              ➤
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue';
import { chat } from '@/api/ai/ai'

// 响应式数据
const messages = ref([]);
const userInput = ref('');
const isTyping = ref(false);
const chatMessages = ref(null);
const messageInput = ref(null);
const lastMessageStatus = ref(''); // 最后一条消息的状态
const isOnline = ref(navigator.onLine); // 网络状态

// 获取当前时间
const getCurrentTime = () => {
  const now = new Date();
  return now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 自动调整输入框高度
const autoResize = () => {
  const textarea = messageInput.value;
  if (textarea) {
    textarea.style.height = 'auto';
    textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
  }
};

// 处理回车键
const handleEnter = (e) => {
  if (e.shiftKey) {
    // Shift+Enter 换行
    return;
  }
  // 普通回车发送消息
  sendMessage();
};

// 发送消息
const sendMessage = async () => {
  const message = userInput.value.trim();
  if (!message || isTyping.value) return;

  // 检查网络状态
  if (!isOnline.value) {
    alert('网络连接已断开，请检查网络连接后重试。');
    return;
  }

  // 添加用户消息
  messages.value.push({
    sender: 'user',
    content: message,
    time: getCurrentTime(),
    status: 'sending' // 默认发送中
  });

  // 清空输入框并重置高度
  userInput.value = '';
  if (messageInput.value) {
    messageInput.value.style.height = 'auto';
  }

  // 滚动到底部
  await nextTick();
  scrollToBottom();

  // 显示正在输入状态
  isTyping.value = true;
  lastMessageStatus.value = 'sending';
  await nextTick();
  scrollToBottom();

  try {
    // 调用AI API
    const response = await chat({ question: message });

    // 隐藏正在输入状态
    isTyping.value = false;
    lastMessageStatus.value = 'success';

    // 处理AI回复
    let aiResponse = '';
    if (typeof response === 'string') {
      aiResponse = response;
    } else if (response && typeof response === 'object') {
      // 如果是对象，尝试提取消息内容
      if (response.success === true && response.result) {
        // 成功的情况，显示结果
        if (response.result.data && Array.isArray(response.result.data)) {
          // 有数据结果，转换为卡片式展示
          const cardsHtml = convertDataToCards(response.result.data);
          aiResponse = `<div class="success-response">
            <div class="result-header">✅ 查询成功</div>
            <div class="result-summary">找到 ${response.result.rows || response.result.data.length} 条记录</div>
            <div class="data-preview">
              <details open>
                <summary>📊 查询结果</summary>
                <div class="cards-container">${cardsHtml}</div>
              </details>
            </div>
          </div>`;
        } else {
          // 其他成功结果
          aiResponse = `<div class="success-response">
            <div class="result-header">✅ 操作成功</div>
            <pre>${JSON.stringify(response.result, null, 2)}</pre>
          </div>`;
        }
      } else if (response.success === false) {
        // 失败的情况
        let errorMessage = response.error || '未知错误';
        
        aiResponse = `<div class="error-response">
          <div class="error-header">❌ 操作失败</div>
          <div class="error-message">${errorMessage}</div>
        </div>`;
      } else {
        // 其他对象格式
        aiResponse = response.message || response.content || response.data || JSON.stringify(response);
      }
    } else {
      aiResponse = '抱歉，我无法理解您的请求，请重试。';
    }

    // 添加AI回复
    messages.value.push({
      sender: 'ai',
      content: aiResponse,
      time: getCurrentTime(),
      status: 'received'
    });

    // 滚动到底部
    await nextTick();
    scrollToBottom();

  } catch (error) {
    console.error('AI API调用错误:', error);

    // 隐藏正在输入状态
    isTyping.value = false;
    lastMessageStatus.value = 'error';

    // 显示错误信息
    let errorMessage = '抱歉，我遇到了一些问题。';
    
    if (error.message) {
      if (error.message.includes('404')) {
        errorMessage = '抱歉，AI服务暂时不可用，请稍后重试。';
      } else if (error.message.includes('500')) {
        errorMessage = '服务器内部错误，请稍后重试。';
      } else if (error.message.includes('网络')) {
        errorMessage = '网络连接失败，请检查网络连接后重试。';
      } else {
        errorMessage = `抱歉，我遇到了一些问题：${error.message}`;
      }
    }

    messages.value.push({
      sender: 'ai',
      content: `<div class="error-message">
        <i class="fa fa-exclamation-triangle"></i>
        ${errorMessage}
      </div>`,
      time: getCurrentTime(),
      status: 'error'
    });

    // 滚动到底部
    await nextTick();
    scrollToBottom();
  }
};

// 滚动到底部
const scrollToBottom = () => {
  if (chatMessages.value) {
    chatMessages.value.scrollTop = chatMessages.value.scrollHeight;
  }
};

// 清空聊天记录
const clearChat = () => {
  if (confirm('确定要清空所有聊天记录吗？此操作不可恢复。')) {
    messages.value = [];
    isTyping.value = false;
  }
};

// 复制文本到剪贴板
const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text).then(() => {
    alert('SQL已复制到剪贴板！');
  }).catch(err => {
    console.error('复制失败:', err);
    alert('复制失败，请手动复制。');
  });
};

// 将数据转换为文字描述
const convertDataToText = (data) => {
  if (!Array.isArray(data) || data.length === 0) {
    return '暂无数据';
  }

  const headers = Object.keys(data[0]);
  let text = `共找到 ${data.length} 条记录：\n\n`;

  data.forEach((row, index) => {
    text += `第${index + 1}条记录：\n`;
    text += `┌─────────────────────────────────────────────────────────────┐\n`;
    
    // 定义字段显示顺序和重要性
    const fieldOrder = [
      { field: 'name', label: '名称' },
      { field: 'id', label: 'ID' },
      { field: 'barcode', label: '条码' },
      { field: 'spec', label: '规格' },
      { field: 'model', label: '型号' },
      { field: 'status', label: '状态' },
      { field: 'category_id', label: '分类ID' },
      { field: 'unit_id', label: '单位ID' },
      { field: 'attributes', label: '属性' },
      { field: 'remark', label: '备注' },
      { field: 'tenant_id', label: '租户ID' },
      { field: 'create_time', label: '创建时间' },
      { field: 'update_time', label: '更新时间' }
    ];
    
    // 按顺序显示字段，每个字段单独一行
    fieldOrder.forEach(({ field, label }) => {
      if (headers.includes(field) && row[field] !== null && row[field] !== undefined && row[field] !== '') {
        text += `│ ${label.padEnd(8)}: ${row[field]}\n`;
      }
    });
    
    text += `└─────────────────────────────────────────────────────────────┘\n\n`;
  });

  return text;
};

// 将数据转换为卡片式HTML
const convertDataToCards = (data) => {
  if (!Array.isArray(data) || data.length === 0) {
    return '<p>暂无数据</p>';
  }

  let html = '';
  data.forEach((row, index) => {
    // 定义字段显示顺序
    const fieldOrder = [
      { field: 'name', label: '名称' },
      { field: 'id', label: 'ID' },
      { field: 'barcode', label: '条码' },
      { field: 'spec', label: '规格' },
      { field: 'model', label: '型号' },
      { field: 'status', label: '状态' },
      { field: 'category_id', label: '分类ID' },
      { field: 'unit_id', label: '单位ID' },
      { field: 'attributes', label: '属性' },
      { field: 'remark', label: '备注' },
      { field: 'tenant_id', label: '租户ID' },
      { field: 'create_time', label: '创建时间' },
      { field: 'update_time', label: '更新时间' }
    ];

    let tableRows = '';
    fieldOrder.forEach(({ field, label }) => {
      if (row[field] !== null && row[field] !== undefined && row[field] !== '') {
        tableRows += `
          <tr>
            <td><strong>${label}:</strong></td>
            <td>${row[field]}</td>
          </tr>
        `;
      }
    });

    html += `
      <div class="card">
        <div class="card-header">
          <h4>记录 ${index + 1}</h4>
        </div>
        <div class="card-body">
          <table>
            <tbody>
              ${tableRows}
            </tbody>
          </table>
        </div>
      </div>
    `;
  });
  return html;
};

// 获取字段的显示名称
const getFieldDisplayName = (field) => {
  const fieldMap = {
    'id': 'ID',
    'name': '名称',
    'barcode': '条码',
    'category_id': '分类ID',
    'spec': '规格',
    'model': '型号',
    'unit_id': '单位ID',
    'attributes': '属性',
    'status': '状态',
    'remark': '备注',
    'tenant_id': '租户ID',
    'create_time': '创建时间',
    'update_time': '更新时间',
    'quantity': '数量',
    'unit_price': '单价',
    'total_amount': '总金额',
    'product_id': '商品ID',
    'warehouse_id': '仓库ID'
  };
  
  return fieldMap[field] || field;
};

// 组件挂载后滚动到底部
onMounted(() => {
  nextTick(() => {
    scrollToBottom();
  });
  
  // 监听网络状态
  window.addEventListener('online', () => {
    isOnline.value = true;
  });
  
  window.addEventListener('offline', () => {
    isOnline.value = false;
  });
  
  // 添加全局复制函数
  window.copyToClipboard = copyToClipboard;
});
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 聊天头部 */
.chat-header {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.user-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.status {
  font-size: 12px;
  color: #4caf50;
  font-weight: 500;
}

.status.offline {
  color: #f44336;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.action-btn:hover {
  background: #e0e0e0;
  color: #333;
}

/* 聊天消息区域 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f5f5f5;
}

.message-item {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-end;
  width: 100%;
}

.message-item.ai-message {
  justify-content: flex-start;
}

.message-item.user-message {
  justify-content: flex-end;
}

.message-item.user-message .message-content {
  order: 1;
}

.message-item.user-message .message-avatar {
  order: 2;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

.message-avatar:not(.user-avatar) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.user-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.message-content {
  max-width: 70%;
  margin: 0 12px;
}

/* 消息气泡样式 */
.message-bubble {
  background: white;
  padding: 12px 16px;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  word-wrap: break-word;
  line-height: 1.4;
  border: none; /* 去掉边框 */
}

.user-bubble {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom-right-radius: 6px;
  border: none; /* 去掉边框 */
  position: relative;
}

.message-status {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 10px;
  opacity: 0.8;
}

.message-status i {
  margin-left: 2px;
}

.ai-bubble {
  background: white;
  color: #333;
  border-bottom-left-radius: 6px;
  border: none; /* 去掉边框 */
}

.ai-bubble ul {
  margin: 8px 0;
  padding-left: 20px;
}

.ai-bubble li {
  margin: 4px 0;
  line-height: 1.4;
}

.typing-bubble {
  background: white;
  color: #666;
  border-bottom-left-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  border: none; /* 去掉边框 */
}

.typing-indicator {
  display: flex;
  gap: 3px;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.typing-text {
  font-size: 14px;
}

.message-time {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  text-align: center;
}

.user-message .message-time {
  text-align: right;
}

/* 聊天输入区域 */
.chat-input {
  background: white;
  border-top: 1px solid #e0e0e0;
  padding: 16px 20px;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

.input-container {
  max-width: 100%;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: #f8f9fa;
  border-radius: 24px;
  padding: 8px 16px;
  border: 1px solid #e9ecef;
}

.message-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font-size: 14px;
  line-height: 1.4;
  max-height: 120px;
  min-height: 20px;
  padding: 4px 0;
  font-family: inherit;
}

.message-input::placeholder {
  color: #adb5bd;
}

.input-actions {
  display: flex;
  align-items: center;
}

.send-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.2s;
  flex-shrink: 0;
}

.send-btn:hover:not(.disabled) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.send-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* 错误消息样式 */
.error-message {
  color: #e74c3c;
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-message i {
  font-size: 14px;
}

/* 成功响应样式 */
.success-response {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 10px;
  padding: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #2e7d32;
  font-weight: 500;
}

.result-header {
  font-size: 18px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-header i {
  font-size: 20px;
}

.result-summary {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}

.sql-preview {
  background: #f0f7fd;
  border: 1px solid #cce5ff;
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sql-preview code {
  background: #e9ecef;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'monospace';
  white-space: pre-wrap;
  word-break: break-all;
}

.sql-preview .copy-btn {
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.sql-preview .copy-btn:hover {
  background: #5a6268;
}

.data-preview {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  background: #f9f9f9;
  margin-top: 10px;
  margin-bottom: 10px;
}

.data-preview details {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.data-preview details:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.data-preview summary {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-preview summary i {
  font-size: 18px;
}

.data-preview pre {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  overflow-x: auto;
  font-size: 13px;
  font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'monospace';
  white-space: pre-wrap;
  word-break: break-all;
  color: #333;
}

.raw-data {
  margin-top: 10px;
}

.raw-data details {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.raw-data summary {
  background: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.raw-data summary i {
  font-size: 16px;
}

.raw-data pre {
  background: #f9f9f9;
  padding: 10px;
  font-size: 12px;
  font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'monospace';
  white-space: pre-wrap;
  word-break: break-all;
  color: #555;
}

/* 文字结果样式 */
.text-result {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  white-space: pre;
  word-break: break-word;
  max-height: 500px;
  overflow-y: auto;
  font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'Courier New', monospace;
  border-left: 4px solid #667eea;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-result strong {
  color: #667eea;
  font-weight: 600;
}

.text-result .record-item {
  margin-bottom: 15px;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border-left: 3px solid #667eea;
}

/* 错误响应样式 */
.error-response {
  background: #ffebee;
  border: 1px solid #ef9a9a;
  border-radius: 10px;
  padding: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #c62828;
  font-weight: 500;
}

.error-header {
  font-size: 18px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-header i {
  font-size: 20px;
}

.error-message {
  font-size: 14px;
  color: #c62828;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* 卡片样式 */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  overflow: hidden;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.card-header {
  background: #f8f9fa;
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.card-body {
  padding: 15px;
}

.card-body table {
  width: 100%;
  border-collapse: collapse;
}

.card-body table td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #555;
}

.card-body table td:first-child {
  font-weight: 600;
  color: #333;
  width: 120px; /* 固定左侧列宽度 */
}

.card-body table td:last-child {
  text-align: right;
}

.card-body table tr:last-child td {
  border-bottom: none;
}

/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-header {
    padding: 10px 16px;
  }

  .chat-messages {
    padding: 16px;
  }

  .chat-input {
    padding: 12px 16px;
  }

  .message-content {
    max-width: 80%;
  }

  .input-wrapper {
    padding: 6px 12px;
  }
}

/* 消息动画 */
.message-item {
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
